<script>
import { orderDetails } from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import { showToast, showDialog } from "vant";
import PdfLoader from "@/lib/htmlToPdfNew.js";

export default {
  components: { getTimeOut, load },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: true,
      formData: {},
      setInfo: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    toChineseMoney(num) {
      var strOutput = "";
      var strUnit = "仟佰拾亿仟佰拾万仟佰拾元角分";
      num += "00";
      var intPos = num.indexOf(".");
      if (intPos >= 0) {
        num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
      }
      strUnit = strUnit.substr(strUnit.length - num.length);
      for (var i = 0; i < num.length; i++) {
        strOutput +=
          "零壹贰叁肆伍陆柒捌玖".substr(num.substr(i, 1), 1) +
          strUnit.substr(i, 1);
      }
      return strOutput
        .replace(/零角零分$/, "整")
        .replace(/零[仟佰拾]/g, "零")
        .replace(/零{2,}/g, "零")
        .replace(/零([亿|万])/g, "$1")
        .replace(/零+元/, "元")
        .replace(/亿零{0,3}万/, "亿")
        .replace(/^元零{0,3}万/, "零亿");
    },
    downLoadPdf() {
      let ele = document.getElementById("pdfContainer");
      // pdf.outPutPdfFn(this.userName + '分析报告')
      let name =
        this.formData.type == 1
          ? this.formData.name
          : this.formData.signing_name;
      let pdf = new PdfLoader(ele, `个人借条(${name})`, "itemClass");
      pdf.getPDF();
    },
    backFn() {
      this.$router.back();
    },
    setData(data) {
      if (data.type == 1) {
        this.setInfo = {
          inputName: data.name,
          inputMoble: data.mobile,
          inputidcard: data.idcard,
          inputSign: data.signature,
          outName: data.signing_name,
          outMoble: data.signing_mobile,
          outidcard: data.signing_idcard,
          outSign: data.signing_signature,
        };
      } else {
        this.setInfo = {
          inputName: data.signing_name,
          inputMoble: data.signing_mobile,
          inputidcard: data.signing_idcard,
          inputSign: data.signing_signature,
          outName: data.name,
          outMoble: data.mobile,
          outidcard: data.idcard,
          outSign: data.signature,
        };
      }
    },
    getData() {
      let data = {
        contract_id: this.$route.query.id,
      };
      orderDetails(data)
        .then((res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
            this.setData(res.data.data);
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <div class="bookMain" id="pdfContainer">
        <div class="headName">个人借条</div>
        <div class="bookInfo">
          <div class="bookItem">
            为<span class="linkText">{{ formData.loan_use }}</span
            >需要
          </div>
          <div class="bookItem">
            本人向<span class="linkText">{{ setInfo.outName }}</span
            >（证件类型：<span class="linkText">居民身份证</span>，证件号：<span
              class="linkText"
              >{{ setInfo.outidcard }}</span
            >）
          </div>
          <div class="bookItem">
            借取本金人民币<span class="linkText">{{
              toChineseMoney(formData.loan_money)
            }}</span
            >（¥<span class="linkText">{{ formData.loan_money }}</span
            >）借款年利率<span class="linkText">{{
              formData.interest_rate
            }}</span
            >%；
          </div>
          <div class="bookItem">
            自<span class="linkText">{{ formData.loan_date }}</span
            >借出，需在<span class="linkText">{{
              formData.repayment_date
            }}</span
            >归还。
          </div>
          <div class="bookItem">
            还款方式为：<span class="linkText">{{
              formData.repayment_date
            }}</span
            >一次性还本付息。
          </div>
          <div class="bookItem">
            本借条由<span class="linkText">{{ setInfo.outName }}</span
            >向<span class="linkText">{{ setInfo.inputName }}</span
            >支付借款本金时生效，支付方式为<span class="linkText">微信转账</span
            >。
          </div>
          <div class="bookItem">本借条纠纷由出借人所在地人民法院管辖。</div>
          <div class="bookItem">立此为据。</div>
          <div class="bookItem hasTop">
            出借人：<span class="linkText">{{ setInfo.outName }}</span>
            <img class="signImg" :src="setInfo.outSign" />
          </div>
          <div class="bookItem hasTop">
            借款人：<span class="linkText">{{ setInfo.inputName }}</span>
            <img class="signImg" :src="setInfo.inputSign" />
          </div>
          <div class="bookItem hasTop">
            证件类型：<span class="linkText">居民身份证</span>
          </div>
          <div class="bookItem">
            证件号：<span class="linkText">{{ setInfo.inputidcard }}</span>
          </div>
          <div class="bookItem">
            联系电话：<span class="linkText">{{ setInfo.inputMoble }}</span>
          </div>
        </div>
      </div>
      <div class="ctrlBtn">
        <div class="homeBtn plainBtn" @click="backFn">返回列表</div>
        <div class="homeBtn" @click="downLoadPdf">下载合同</div>
      </div>
    </div>

    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #f6f7f9;
  .showCont {
    padding-top: 0.75rem;
    padding-bottom: 3.25rem;
    box-sizing: border-box;
  }
  .bookMain {
    width: 92%;
    padding: 20px 20px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    letter-spacing: 1px;
    .headName {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      padding: 10px 0;
    }
    .bookInfo {
      font-weight: 400;
      .bookItem {
        font-size: 12px;
        margin-bottom: 8px;
        line-height: 1.3;
        position: relative;
        .signImg {
          position: absolute;
          height: 40px;
          left: 100px;
          top: -10px;
        }
        .linkText {
          display: inline-block;
          border-bottom: 1px solid black;
          padding: 0 5px;
        }
      }
      .hasTop {
        margin-top: 20px;
      }
    }
  }
  .ctrlBtn {
    width: 100%;
    position: fixed;
    left: 0%;
    bottom: 0rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 4%;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;
    .homeBtn {
      height: 2.2rem;
      width: 48%;
      line-height: 2.2rem;
      border-radius: 0.25rem;
      background-color: #05a165;
      color: white;
      text-align: center;
      font-size: 0.6rem;
    }
    .plainBtn {
      background-color: #fff;
      border: 1px solid #05a165;
      color: #05a165;
    }
  }
}
</style>
